<template>
  <div class="details_content">
    <div class="details_bar">
      <ul>
        <li>商品</li>
        <li>评价</li>
        <li>详情</li>
      </ul>
    </div>
    <div class="detail_swiper">
      <van-swipe @change="onChange" width="100%">
        <van-swipe-item>
          <img width = "100%" :src="details.image" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img width = "100%" src="https://bfs.biyao.com/group1/M00/51/71/rBACYV1Hs1WAC5Q7AAJNXHeC0jY547_800x800.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img width = "100%" src="https://bfs.biyao.com/group1/M00/51/71/rBACYV1Hs1iAGICRAAICPiZw9m8805_800x800.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img width = "100%" src="https://bfs.biyao.com/group1/M00/51/71/rBACYV1Hs1uAEGYvAAOc0cD7HTM837_800x800.jpg" alt="">
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/4
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="details_message">
      <div class="details_price_collect">
        <div class="details_price">￥<span>{{details.priceStr}}</span></div>
        <div class="pay_hb"><img src="https://static.biyao.com/mnew/img/product/editor_huabei24@2x_61f9e9e.png" alt=""><span>支持花呗分期付款</span></div>
        <div class="details_collect"><img src="https://static.biyao.com/mnew/img/product/icon_collection_default@2x_6458530.png" alt=""><span>收藏</span></div>
      </div>
      <div class="details_address">
        <div class="det_address">
          <img src="https://static.biyao.com/mnew/img/master/togetherGroup/icon_manufacturer_location_nomal@2x_0726aa8.png">
          <span>{{subtitle[0]}}</span>
        </div>
        <div class="detail_date">
          生产周期：<span>7</span>天
        </div>
      </div>
      <div class="details_title">
        <h1>{{details.mainTitle}}</h1>
      </div>
      <div class="details_desc">
        <span>{{subtitle[1]}}</span>
      </div>
      
    </div>
    <div class="details_service">

    </div>
    <div class="vertical_swiper">
      <van-swipe class="vsp" style="height: 2.78rem;" :autoplay="2000" :show-indicators="false" vertical>
        <van-swipe-item class="vsi">
          <div class="swiper_item">
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://bfs.biyao.com/group1/M01/C0/B2/rBACVF6pRpaAGYpAAAAORd1WFJM273.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://static.biyao.com/mnew/img/master/firendHelp/rightsDetail/icon_mysterious_friend_big@2x_54bfa3c.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item class="vsi">
          <div class="swiper_item">
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://bfs.biyao.com/group1/M01/C0/B2/rBACVF6pRpaAGYpAAAAORd1WFJM273.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://static.biyao.com/mnew/img/master/firendHelp/rightsDetail/icon_mysterious_friend_big@2x_54bfa3c.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item class="vsi">
          <div class="swiper_item">
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://bfs.biyao.com/group1/M01/C0/B2/rBACVF6pRpaAGYpAAAAORd1WFJM273.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
            <div class="item_slider">
              <div class="slider_massage">
                <img src="https://static.biyao.com/mnew/img/master/firendHelp/rightsDetail/icon_mysterious_friend_big@2x_54bfa3c.png" alt="">
                <span class="user_name">徐帅兵</span>
                <span class="pt_massage">还差<i>1</i>人拼成团</span>
              </div>
              <div class="slider_btn">
                <div class="sl_btn">参团</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="details_pintuan" >
      <router-link to="/home/hot/pt">
      <van-nav-bar
        left-text="拼团玩法"
        right-text=">"
      /></router-link>
      <img src="https://static.biyao.com/mnew/img/master/togetherGroup/rule@2x_4b87758.png">
    </div>
    <div class="details_comment">
      <div class="comment_title">
        <p class="goods_com">商品评价（<span>3158</span>）</p>
        <router-link to="/home/hot/comment">
          <p class="com_persent">好评率<span>97.5%</span> &nbsp;&nbsp;&nbsp; ></p>
        </router-link>
      </div>
      <div class="comment_content">
        <div class="user_massages">
          <img src="https://bfs.biyao.com/group1/M00/A5/83/rBACW1x_e0-ATTxuAAAKtdLqilY945.png" alt="">
          <div class="user_name">
            <p>
              徐帅兵
            </p>
          </div>
          <div class="user_look">
            <img class="label-icon" src="https://static.biyao.com/mnew/img/master/comment/icon_evaluate_satisfied_48@2x_6b80b83.png">
            <span>满意</span>
          </div>
        </div>
        <div class="comment_time">
          <p>
            2019.04.20&nbsp;&nbsp;颜色:白色|尺寸:48*74cm
          </p>
        </div>
        <div class="comment_contents">
          <p>
            先买了一个，试试后感觉非常好，现在买了三个。
          </p>
        </div>
      </div>
    </div>
    <div class="details_img">
      <img src="https://bfs.biyao.com/group1/M01/92/D2/rBACW15-rouAKIIJAAHsBFT3gmo842.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/92/53/rBACYV5-rouAYXJRAAHcpeTJ9Bo942.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M01/90/F4/rBACVF5-rouACfpCAAFrsgTD3A8402.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M01/92/53/rBACYV5-royAQrFIAAJZqwxwe2E145.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M01/92/D2/rBACW15-royAcdUFAAK6_aKbz60330.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/90/F4/rBACVF5-royAG9JTAAG6L2ToXpU664.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/92/D2/rBACW15-royAfkYzAAFGFXk2Eqk027.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/92/53/rBACYV5-royAALHjAAGE-Nlt6c0127.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M01/92/53/rBACYV5-ro2AB3ZIAAKVgCJVXfg530.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/90/F4/rBACVF5-ro2ALm9KAAHGRdIQTOA306.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M00/92/53/rBACYV5-ro2AVPA-AAMx1iCXckE330.jpg" alt="">
      <img src="https://bfs.biyao.com/group1/M01/90/F5/rBACVF5-ro6APVIIAAdX8f7-FnM651.jpg" alt="">
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />   
      <van-goods-action-button is-link @click="show = true" color="#be99ff" type="warning" text="加入购物车" />
      <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
    </van-goods-action>
    <van-overlay :show="show">
      <div class="wrapper" >
        <div class="block" >
          <div class="choose_header">
            <img :src="details.image" alt="">
            <img class="quit" @click="show = false" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2833208177,57996399&fm=26&gp=0.jpg" alt="">
            <div class="choose_tit">
              <div class="choose_price">
                <p>￥{{details.priceStr}}</p>
              </div>
              <div class="choose_duration">
                <p>生产周期：<span>7</span>天</p>
              </div>
              <div class="choose_size_choosed">
                <p>已选择：<span class="choed_size">{{size}}</span>,<span class="choed_count">{{value}}件</span></p>
              </div>
            </div>
          </div>
          <div class="choose_size">
            <p class="size_title">
              尺码<span>（已选：{{size}}）</span>
            </p>
            <div class="btn_box">
              <button :id="iss?'active':''"  class="size_buttns " @click="sizeCheck('S')">S</button>
              <button :id="issh?'active':''" class="size_buttns" @click="sizeCheck('M')">M</button>
              <button :id="issho?'active':''" class="size_buttns" @click="sizeCheck('L')">L</button>
              <button :id="isshow?'active':''" class="size_buttns" @click="sizeCheck('XL')">XL</button>
            </div>
            
          </div>
          <div class="choose_count">
            <p>购买数量：</p>
            <div class="count_input">
              <button class="count_red" @click="redvalue">-</button>
              <input type="text" v-model="value">
              <button class="count_add" @click="addvalue">+</button>
            </div>
          </div>
          <div class="choose_btn">
            <button class="add_shoping_car" @click="clickAddShoppingCar">加入购物车</button>
          </div>
        </div>
      </div>
    </van-overlay>

  </div>  

</template>

<script>

import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);

export default {
  mounted() {
    console.log(1)
     let msg = window.localStorage.getItem('shopDetails')
     this.details = JSON.parse(msg)
     this.subtitle =(this.details.subtitle).split('|') 
     console.log(this.details,this.subtitle)
    },
  data() {
    return {
      current: 0,
      details:"",
      subtitle:'',
      show:false,
      value: 1,
      size:'S',
      car : {},
      isshow:false,
      iss:true,
      issh:false,
      issho:false
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    showPopup() {
      this.show = true;
    },
    addvalue(){
      this.value++
    },
    redvalue(){
      if(this.value >0){
        this.value--
      }
    },
    sizeCheck(size){
      this.size = size
      switch(size){
        case 'S': 
              this.iss = true
              this.issh = false
              this.issho = false
              this.isshow = false
              break;
        case 'M' :
              this.iss = false
              this.issh = true
              this.issho = false
              this.isshow = false
              break;
        case 'L':
              this.iss = false
              this.issh = false
              this.issho = true
              this.isshow = false
              break;
        default :
              this.iss = false
              this.issh = false
              this.issho = false
              this.isshow = true
              break;
      }
      
    },
    clickAddShoppingCar(){
     
      this.car.id = this.details.id
      this.car.price = this.details.priceStr
      this.car.imgurl = this.details.image
      this.car.checked = false
      this.car.name = this.details.mainTitle
      this.car.shopname = this.subtitle[0]
      this.car.count = this.value
      this.car.size = this.size
      console.log(this.car)
      let shopCar = window.localStorage.getItem('shopCar')
      if(shopCar){
        shopCar = JSON.parse(shopCar)
        shopCar.push(this.car)
        shopCar=JSON.stringify(shopCar)
        window.localStorage.setItem('shopCar',shopCar)
      }else{
        shopCar = {}
        shopCar.push(this.car) 
        shopCar=JSON.stringify(shopCar)
        window.localStorage.setItem('shopCar',shopCar)
      }
    }
  },

}
</script>

<style lang="stylus" scoped>
.details_content
  width 100%
  overflow scroll
  .details_bar
    position fixed
    z-index 999
    width 100%
    height .88rem
    box-shadow 0 0 .06rem #dcc0de
    -webkit-box-shadow 0 0 .06rem #dcc0de
    ul 
      width 100%
      height .88rem
      background-color #ffffff
      list-style none
      li 
        width 33.33333%
        height .88rem
        float left
        color #353535
        font-size .30rem
        text-align center
        line-height .88rem      
  .details_message
    width 100%
    height 3.26rem
    box-sizing border-box
    padding .24rem
    .details_price_collect
      width 100%
      height .62rem
      .details_price
        width 1rem
        height .62rem
        line-height .62rem
        text-align center
        float left
        color #ff3637
        font-size .44rem
        margin-right .2rem
      .pay_hb
        width 2.5rem
        height .36rem
        float left
        font-size .2rem
        color #666
        margin-top .13rem
        line-height .36rem
        img
          display block
          width .32rem
          height .32rem
          float left
      .details_collect
        width .9rem
        height 0.62rem
        float right
        font-size .24rem
        color #4a4a4a
        line-height .62rem
        img 
          display block
          width .32rem
          height .32rem
          float left
          margin-top .13rem
          margin-right .05rem
    .details_address
      width 100%
      height .54rem
      .det_address
        width 3rem
        height .54rem
        line-height .54rem
        font-size .26rem
        float left
        img
          display block
          width .32rem
          height .32rem
          float left
          margin-top .11rem
          margin-right .1rem
        span 
          display block
          width 2.5rem
          height .54rem
          float left
          line-height .54rem
          font-size .26rem
          color #bf9e6b
          overflow hidden
      .detail_date
        width 1.5rem
        height .54rem
        float right
        font-size .22rem
        color #bbb
        line-height .54rem            
    .details_title
      width 100%
      height .96rem
      margin-top .24rem
      h1 
        line-height .48rem
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 2
        -webkit-box-orient vertical
        font-size .34rem
        color #4a4a4a
        font-weight 500
    .details_desc
      width 100%
      height .36rem
      margin-top .06rem
      font-size .24rem
      color #999
  .details_service
    width 100%
    height .72rem
    padding 0 .2rem
    background #FFFBF2      
  .vertical_swiper
    width 100%
    height 2.78rem
    padding 0 .2rem
    border-bottom .2rem solid #f5f5f5      
    border-top .2rem solid #f5f5f5
    .vsp
      .vsi
        overflow hidden
        .swiper_item
          width 100%
          height 2.78rem
          .item_slider
            width 100%
            height 1.19rem
            box-sizing border-box
            border-bottom .01rem solid #f4f4f4
            .slider_massage
              width 5.54rem
              height .78rem
              float left
              margin-top .2rem
              img
                display block
                width .78rem
                height .78rem
                float left
              .user_name
                display block
                height 0.78rem
                width 1.5rem
                float left
                font-size .24rem
                line-height .78rem
                margin-left .2rem
              .pt_massage
                display block
                height 0.78rem
                width 1.8rem
                line-height .78rem
                font-size .24rem
                color #4a4a4a
                float right
                i 
                  color #f7a701
            .slider_btn
              height 0.6rem
              width 1.5rem 
              float left
              margin-top .3rem
              .sl_btn
                width 1.36rem
                height .56rem
                background-color #7F4395
                box-sizing border-box
                border .01rem solid #7F4395
                border-radius .05rem
                color #fff
                font-size .24rem
                text-align center
                line-height .56rem
  .details_pintuan
    width 100%
    height 2.74rem
    img 
      width 100%
  .details_comment
    height 3.28rem
    border-bottom .2rem solid #f4f4f4
    border-top .2rem solid #f4f4f4
    padding 0 .2rem
    box-sizing content-box
    .comment_title
      width 100%
      height .98rem
      border-bottom .01rem solid #ebebeb
      .goods_com
        float left
        width 4rem
        height .98rem
        color #4a4a4a
        font-size .28rem
        line-height .98rem
      .com_persent
        float right
        width 2.12rem
        height .98rem
        color #4a4a4a
        font-size .24rem
        line-height .98rem
        text-align right
    .comment_content
      width 100%
      height 2.3rem
      padding .24rem 0
      box-sizing border-box
      .user_massages
        width 100%
        height .56rem
        img
          display block
          width .56rem
          height .56rem
          border-radius .56rem
          float left
        .user_name
          height .56rem
          width 2rem
          float left
          line-height .56rem
          color #333
          font-size .3rem
          margin-left .15rem
        .user_look
          height .56rem
          width 1.08rem
          line-height .56rem
          text-align: right;
          font-size: .26rem;
          color: #EBBA67;
          float right
          img
            display block
            width .48rem
            height .48rem
            margin-top .04rem
      .comment_time
        width 100%
        height .33rem
        margin-top .24rem
        font-size .24rem
        color #999
      .comment_contents
        width 100%
        height .44rem
        margin-top .24rem
        font-size .3rem
        color #333
  .details_img
    width 100%
    img 
      width 100%
      display block     



.wrapper
  height 100%
  position relative
  .block 
    position absolute
    bottom 0
    width 100%
    height 55%
    background-color #fff
    .choose_header
      width 100%
      height 2.2rem
      border-bottom .01rem solid #ddd
      position relative
      img 
        position absolute
        top -0.2rem
        left .25rem
        display block
        width 2.14rem
        height 2.14rem
        border .01rem solid #ccc
        box-shadow .05rem .05rem .3rem 0 #ccc
      .quit
        display block
        width .5rem
        height .5rem
        position absolute
        left 6.8rem
        top .2rem
      .choose_tit
        margin-left 2.57rem
        padding-top .2rem
        width 4.7rem
        height 1.92rem
        .choose_price
          width 4.2rem
          height .72rem
          line-height .72rem
          padding-left .1rem
          p 
            font-size .38rem
            color #f33
            width 3rem
            float left
            display block

        .choose_duration
          width 4.7rem
          height .32rem
          margin-bottom .12rem
          padding-left .1rem
          font-size .24rem
          line-height .32rem
          color #808080
        .choose_size_choosed
          width 4.7rem
          height .36rem
          padding-left .1rem
          line-height .36rem
          color #828282
          font-size .24rem
          p 
            span 
              color #333
    .choose_size
      width 100%
      height 1.92rem
      margin-top .4rem
      padding 0 .25rem
      border-bottom .01rem solid #ddd
      .size_title
        width 100%
        height .34rem
        font-size .3rem
        color #333
        span
          color #808080
      .btn_box
        width 100%
        height .92rem
        margin-top .4rem
        .size_buttns
          width 1.1rem !important
          height .72rem !important
          line-height .72rem
          padding 0 .4rem
          margin-right 5%
          margin-bottom .2rem
          border 1px solid #ccc
          border-radius .1rem
          box-sizing border-box
          font-size .24rem
          background-color #fff 
        #active
          border 1px solid #7e4395
          background-color #7e4395
          color #fff
    .choose_count
      width 100%
      height 1rem
      margin-top .3rem
      padding 0 .25rem
      p 
        width 1.6rem
        height 1rem
        font-size .3rem
        line-height 1rem
        float left
      .count_input
        float right
        height 1rem
        width 1.8rem
        .count_red
          width .5rem !important
          height .5rem !important
          margin-top .25rem
          background-color #F4F4F4
          border .01rem solid #F4F4F4
          font-size .38rem
          line-height .5rem
          color #333
          display block
          float left
        input 
          width .5rem
          height .5rem
          margin 0 .1rem
          margin-top .25rem
          display block
          float left
          text-align center
          border none
        .count_add
          width .5rem !important
          height .5rem !important
          font-size .38rem
          line-height .5rem
          color #333
          background-color #F4F4F4
          border .01rem solid #F4F4F4
          margin-top .25rem
          display block
          float left
    .choose_btn
      width 100%
      height 1rem
      padding 0 .25rem
      margin-top .2rem
      .add_shoping_car
        width 100%
        border 1px solid #7e4395
        height 1rem
        border-radius 1rem
        background-color #7e4395
        color #fff
        font-size .32rem
        font-weight 500






.custom-indicator
        position absolute
        height .44rem
        width  1.12rem
        right .2rem
        bottom .2rem
        margin-top .2rem
        padding .02rem .05rem
        border-radius .22rem
        color #fff
        text-align center
        line-height .44rem
        font-size .24rem
        background rgba(0, 0, 0, 0.1)
 
</style>
<style lang="css">
.van-nav-bar__text{
  color : #333333 !important;
}
.van-icon-chat-o::before{
  top : 0 ;
}
.van-nav-bar{
  z-index: 0;
}
  
</style>